<template>
  <div class="index" id="index">
    <!-- <gxtable :column="tableHeader" :data="tableData" ref="gxtable"> </gxtable> -->
  </div>
</template>

<script>
import gxtable from '@/components/GxTable.vue';
export default {
  name: 'index',
  components: { gxtable },
  props: {},
  data() {
    return {
      tableHeader: [],
      tableData: [],
      time: ['2022-09', '2022-10'],

      data: [
        {
          name: '两河口',
          time: '2022-09-01', //上旬
          type: 'up',
          qcxl: '123',
          qmxl: '456',
          xsl: '123',
          qcxl: '566',
          qmxl: '9987',
        },
        {
          name: '两河口',
          time: '2022-09-011', //上旬
          type: 'up',
          qcxl: '123',
          qmxl: '456',
          xsl: '123',
          qcxl: '566',
          qmxl: '9987',
        },
        {
          name: '锦屏一级',
          time: '2022-09-01', //上旬
          type: 'up',
          qcxl: '123',
          qmxl: '456',
          xsl: '123',
          qcxl: '566',
          qmxl: '9987',
        },
        {
          name: '锦屏一级',
          time: '2022-09-11', //上旬
          type: 'up',
          qcxl: '123',
          qmxl: '456',
          xsl: '123',
          qcxl: '566',
          qmxl: '9987',
        },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    console.log(this.data);
    this.init();
  },
  methods: {
    init() {
      const tenDay = [...new Set(this.data.map((e) => e.type))];

      this.time.forEach((item, index) => {
        tenDay.forEach((em, i) => {
          this.tableHeader.push({
            label: item,
            children: {
              label: em == 'up' ? '上旬' : '',
              prop: `d${(index + 1) * (i + 1)}`,
            },
          });
        });
      });

      console.log(this.tableHeader);
    },
  },
};
</script>

<style scoped lang="less">
.index {
  height: 100%;
}
</style>
